<script setup>

import {ref} from 'vue'

const style = ref('style2')

</script>

<template>
  <!--默认情况下，属性的值是常量，不能自动动态地变化
    想把这个属性的值设置为动态的-->
  <!--我们需要将这个class属性变成一个变量，就可以改变这个属性的值了  -->
  <!--使用v-bind:就可以将class属性的值设置成一个变量  -->
<!-- 使用v-bind后，style就是一个变量了  -->
<!--属性绑定的目的：让属性的值从一个常量变成一个变量，
从而可以动态地设置这个属性的值，改变这个属性  -->
    <div v-bind:class="style"></div>
  <hr>
<!--精简方式  -->
  <div :class="style"></div>
</template>

<style scoped>
  .style1{
    width: 120px;
    height: 120px;
    background-color: red;
  }
  .style2{
    width: 120px;
    height: 120px;
    background-color: blue;
  }
</style>